<template>
    <view class="party">
        <view class="con" v-if="list && list.length">
            <view v-for="(item, index) in list" :key="index" class="item" @click="goInfo(item)">
                <image class="left" mode="aspectFill" :src="item.coverImage" />
                <view class="right">
                    <view class="top">
                        <view class="title ">{{ item.title }}</view>
                        <view class="desc ">
                            <image style="width:38rpx;height:38rpx" src="@/static/image/fenlei.png"></image>
                            <text style="margin-left: 10rpx;">{{ item.classify }}</text>
                        </view>
                        <view class="desc ">
                            <u-icon name="clock" color="#333333" size="28"></u-icon>
                            <text style="margin-left: 10rpx;">{{ item.startTime }}至{{ item.endTime }}</text>
                        </view>
                        <view class="desc">
                            <image class="tags" style="width:30rpx;height:30rpx" src="@/static/image/baoming.png">
                            </image>
                            <u-tag v-if="item.participateStatus == '0'" text="申请入团" plain size="mini"
                                type="warning"></u-tag>
                            <view v-if="item.participateStatus == '1'">
                                <u-tag
                                    v-if="Date.parse(new Date()) > Date.parse(item.signUpStartTime) && Date.parse(new Date()) < Date.parse(item.signUpEndTime)"
                                    text="报名中" plain size="mini" type="warning"></u-tag>
                                <u-tag v-else-if="Date.parse(new Date()) > Date.parse(item.signUpStartTime)"
                                    text="报名已结束" plain size="mini" type="error"></u-tag>
                                <u-tag v-else-if="Date.parse(new Date()) < Date.parse(item.signUpEndTime)" text="报名未开始"
                                    plain size="mini" type="error"></u-tag>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="con" v-else>
            <view class="nothing">暂无数据</view>
        </view>
    </view>
</template>

<script>
import { collectionList } from '@/api/data'
import storage from "@/utils/storage";
export default {
    data() {
        return {
            list: [],
        }
    },
    onLoad() {
        this.collectionList()
    },
    methods: {
        // 获取社团活动列表
        collectionList() {
            collectionList().then((res) => {
                if (res.code == '200') {
                    res.data = res.data.map(e => {
						return {
							...e,
							coverImage: 'http://127.0.0.1:4444/api/upload/' + e.coverImage,
							startTime: uni.$u.timeFormat(res.data.startTime, "yyyy-mm-dd"),
							endTime: uni.$u.timeFormat(res.data.endTime, "yyyy-mm-dd"),
							signUpStartTime: uni.$u.timeFormat(res.data.signUpStartTime, "yyyy-mm-dd"),
							signUpEndTime: uni.$u.timeFormat(res.data.signUpEndTime, "yyyy-mm-dd"),
						}
					})
                    this.list = res.data;
                }
            })
        },
        // 跳转社团活动详情
        goInfo(item) {
            let token = storage.getToken();
            if (!token) {
                // 未登录
                uni.showModal({
                    title: '您还未登录',
                    content: '是否先进行登录？',
                    cancelText: '取消',
                    confirmText: '确定',
                    success: function (res) {
                        if (res.confirm) {
                            setTimeout(() => {
                                uni.navigateTo({ url: '/pages/login/login' })
                            }, 2000)
                            // 用户点击确定按钮的逻辑处理
                        } else if (res.cancel) {
                            // 用户点击取消按钮的逻辑处理
                        }
                    }
                });
            } else {
                const id = item?.id;
                const societiesId = item?.societiesId;
                if (!id) return;
                uni.navigateTo({ url: `/pages/party/info?id=${id}&societiesId=${societiesId}` });
            }
        },
    }
}
</script>

<style scoped lang="scss">
.party {
    box-sizing: border-box;
    width: 100%;
    background: #f4f4f4;
    height: 100vh;
    overflow: hidden;
    padding: 20rpx;

    .con {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding-bottom: 50rpx;

        .nothing {
            width: 100%;
            background-color: #fff;
            padding: 20rpx 20rpx 0rpx 0;
            border-radius: 10rpx;
            border-top-right-radius: 30rpx !important;
            border-bottom-left-radius: 30rpx !important;
            margin-bottom: 40rpx;
            box-sizing: border-box;
            height: 500rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .item {
            width: 100%;
            display: flex;
            background-color: #fff;
            padding: 20rpx;
            padding-left: 10rpx;
            border-radius: 30rpx;
            margin-bottom: 30rpx;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 8rpx 12rpx -4rpx rgba(0, 0, 0, 0.1), 0 8rpx 16rpx -8rpx rgba(0, 0, 0, 0.1);

            .left {
                height: 200rpx;
                border-radius: 30rpx;
                box-sizing: border-box;
                width: 30%;
            }

            .right {
                width: 70%;
                box-sizing: border-box;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding-left: 20rpx;

                .top {
                    width: 100%;
                    display: flex;
                    flex-direction: column;

                    .title {
                        width: 100%;
                        font-size: 30rpx;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 20rpx;
                        margin-top: 14rpx;
                    }

                    .desc {
                        width: 100%;
                        font-size: 26rpx;
                        color: #999;
                        margin-bottom: 15rpx;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        &:last-child {
                            margin-bottom: 0 !important;
                        }

                        .tags {
                            margin-right: 20rpx;
                        }
                    }
                }

                .line {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 24rpx;

                    .join {
                        font-size: 24rpx !important;
                        background-color: var(--greyLight);
                        color: #999;
                        border-radius: 10rpx;
                        line-height: 2;
                        padding: 0 25rpx;
                        border-top-right-radius: 20rpx !important;
                        border-bottom-left-radius: 20rpx !important;
                    }

                    .comm {
                        background-color: var(--projectCompareColor);
                        color: #fff;
                    }



                    .users {
                        flex: 1;
                        display: flex;
                        align-items: center;
                    }

                    .pic-group {
                        display: flex;
                        padding: 0 10rpx 0 0rpx;
                        align-items: center;
                    }

                    .pic-group .pic {
                        width: 48rpx !important;
                        height: 48rpx !important;
                        margin-left: -20rpx;
                        border: 50% solid #fff;
                        vertical-align: middle;

                        &:first-child {
                            margin-left: 0rpx;
                        }
                    }

                    .num {
                        font-size: 24rpx;
                        color: #bbb;
                    }
                }
            }
        }

    }
}
</style>
